/*页面样式*/
html, body {
    height: 100%;
}

body {
    background: url("../img/com/bg_main.jpg") no-repeat;
    background-size: 100% 100%;
}

/*header------*/
@media all {
    body > header {
        position: relative;
        height: 3.75rem;
        background-color: #0d175066;
        box-shadow: 0 0 0.5rem 0.1rem rgba(0,0,0,.15);
    }

    body > header > .logoBox {
        margin-left: 1.25rem;
    }

    body > header > .logoBox > * {
        display: inline-block;
        vertical-align: middle;
    }

    body > header > .logoBox > .logo {
        width: 1.6rem;
        height: 1.875rem;
        background: url("../img/com/logo.png") no-repeat;
        background-size: 100% 100%;
    }

    body > header > .logoBox > h1 {
        padding-left: .8rem;
        line-height: 1.75rem;
        font-size: 1.375rem;
        font-weight: normal;
    }

    body > header > ul {
        position: absolute;
        top: 0;
        right: 0;
    }

    body > header > ul > li {
        display: inline-block;
        padding: 0 1rem;
    }

    body > header > ul > li > a > .icon {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        margin-right: .15rem;
        background: transparent 50% 50% no-repeat;
        background-size: contain;
    }

    body > header > ul > li > a > span {
        vertical-align: middle;
        font-size: .75rem;
        line-height: 3.75rem;
    }

    body > header > ul > li.notice > a > .icon {
        background-image: url("../img/com/i_notice.png");
    }

    body > header > ul > li.message > a > .icon {
        background-image: url("../img/com/i_message.png");
    }

    body > header > ul > li.user > a > .icon {
        background-image: url("../img/com/i_user.png");
    }
}

.navContent {
    display: flex;
    height: calc(100% - 3.75rem);
}

/*左侧导航条------*/
@media all {
    #mainNav {
        position: relative;
        /*width: 15%;*/
        width: 9rem;
        min-width: 9rem;
        transition: all 200ms ease-in-out;
        background-color: #0d175066;
        box-shadow: 0.1rem 0.2rem 0.3rem 0.1rem rgba(0,0,0,.15);
    }

    #mainNav > ul > li {
        position: relative;
        font-size: .875rem;
    }

    #mainNav > ul > li > a {
        display: block;
        height: 2.5rem;
        line-height: 2.5rem;
        padding-left: 1.4rem;
        word-break: keep-all;
    }
    #mainNav > ul > li > a >.icon{
        display: inline-block;
        position: absolute;
        top: 1.05rem;
        right: .8rem;
        width: .6rem;
        height: .6rem;
        background: url(../img/com/i_arrow_down.png) no-repeat;
        background-size: contain;
    }
    #mainNav > ul > li > ul {
        display: none;
    }

    #mainNav > ul > li > ul > li {
        display: block;
        padding-left: 2.4rem;
        line-height: 1.875rem;
        font-size: .75rem;
        cursor: pointer;
        word-break: keep-all;
        transition: background-color 300ms ease;
    }

    #mainNav ul > li > a.dropdown-toggle:hover,
    #mainNav > ul > li > ul > li:hover {
        background-color: rgba(0, 0, 0, .1);
    }

    #mainNav > ul > li > ul > li.active {
        color: var(--themeBlue);
        background: linear-gradient(to right, var(--themeBlue) 2%, rgba(0, 0, 0, .3) 2%);
    }


    #mainNav ~ .mainNavFoldCtr {
        position: absolute;
        padding: 1.3rem .05rem;
        top: 45%;
        background: rgba(0, 0, 0, .2);
        cursor: pointer;
        /*left: 11.5%;*/
        left: 8rem;
        border-radius: .3rem 0 0 .3rem;
        transition: all 200ms ease-in-out;
    }

    #mainNav ~ .mainNavFoldCtr > .icon {
        width: .8rem;
        height: .5rem;
        background: url(../img/com/i_arrow_up.png) no-repeat;
        background-size: 100% 100%;
        transform: rotate(-90deg);
    }
    #mainNav ~ .container{
        width: 100%;
    }
    /*左边主菜单折叠动画*/
    #mainNav.folded {
        width: 0;
        min-width: 0;
        overflow: hidden;
    }

    #mainNav.folded ~ .mainNavFoldCtr  {
        left: 0;
        border-radius: 0 .3rem .3rem 0;
    }
    #mainNav.folded ~ .mainNavFoldCtr > .icon {
        transform: rotate(90deg);
    }
}

/*内容切换区域------*/
.container {
    width: 85%;
}

/*tab切换样式------*/
@media all {
    .nav-tabs {
        height: 1.875rem;
        background-color: rgba(0, 0, 0, 0.1);
    }

    .nav-tabs > ul > li {
        position: relative;
        display: inline-block;
        width: 8.125rem;
        height: 1.875rem;
        text-align: center;
        vertical-align: top;
    }

    .nav-tabs > ul > li:first-child {
        margin-right: -.3rem;
    }

    .nav-tabs > ul > li > a {
        position: relative;
        display: table;
        width: 100%;
        height: 100%;
        font-size: .75rem;
        border-right: .06rem solid rgba(204, 204, 204, 0.2);
    }

    .nav-tabs > ul > li:first-child > a {
        width: 5.12rem;
        /*height: 100%;*/
        background: url("../img/com/i_home.png") 50% 50% no-repeat;
        background-size: auto 60%;
    }

    .nav-tabs > ul > li.active > a {
        background-color: var(--themeBlue);
    }

    .nav-tabs > ul > li > a >span.text{
        display: table-cell;
        width: 100%;
        height: 100%;
        vertical-align: middle;
    }

    .nav-tabs > ul > li > a > .close {
        position: absolute;
        display: none;
        right: .3rem;
        font-size: 1.3rem;
    }

    .nav-tabs > ul > li > a:hover > .close {
        display: inline;
    }

    .nav-tabs > ul > li:first-child > a:hover > .close {
        display: none;
    }

    .nav-tabs > ul > li > .tab-tip {
        position: relative;
        top: .45rem;
        display: none;
        background: #000a;
        width: 100%;
        height: 1.875rem;
        border-radius: .25rem;
    }

    .nav-tabs > ul > li:first-child {
        width: 3.75rem;
    }

    .nav-tabs > ul > li:first-child > .tab-tip > .refresh ~ * {
        display: none;
    }

    .nav-tabs > ul > li > .tab-tip:after {
        content: '';
        position: absolute;
        border: .3rem solid #000a;
        border-right-color: transparent;
        border-bottom-color: transparent;
        transform: rotate(45deg);
        top: -.3rem;
        left: 45%;
    }

    .nav-tabs > ul > li.active:hover > .tab-tip {
        display: inline-block; /*这里如果用block，则鼠标很难从标签移到提示上*/
        text-align: center;
    }

    .nav-tabs > ul > li:hover > .tab-tip > a {
        line-height: 1.875rem;
        font-size: .75rem;
    }

    .nav-tabs > ul > li:hover > .tab-tip > a > .icon {
        display: inline-block;
        position: relative;
        top: .3rem;
        margin-right: .3rem;
        width: 1.3rem;
        height: 1.3rem;
        background: no-repeat;
        background-size: contain;
    }

    .nav-tabs > ul > li:hover > .tab-tip > a.refresh > .icon {
        background-image: url("../img/com/i_refresh.png");
    }

    .nav-tabs > ul > li:hover > .tab-tip > a.favorite > .icon {
        background-image: url("../img/com/i_favorite.png");
    }

    .nav-tabs > ul > li:hover > .tab-tip > .separator {
        margin: 0 .1rem;
    }
    .nav-tabs > ul > li.collapse,
    .nav-tabs > ul > li.collapse>*{
        position: absolute;
        right: 0;
    }
    .nav-tabs > ul > li.collapse>button{
        z-index: 1;
        width: 2rem;
        height: 1.85rem;
        background: transparent;
        border: none;
    }
    .nav-tabs > ul > li.collapse>button>.icon-bar{
        position: absolute;
        left: 50%;
        top: 30%;
        width: 50%;
        transform: translateX(-50%);
        border-top: 2px solid #fff;
    }

    .nav-tabs > ul > li.collapse>button>.icon-bar:nth-of-type(2){
        top: 50%;
    }
    .nav-tabs > ul > li.collapse>button>.icon-bar:nth-of-type(3){
        top: 70%;
    }
    .nav-tabs > ul > li.collapse>ul{
        top: 1.875rem;
        width: 11.25rem;
        line-height: 1.875rem;
        font-size: .75rem;
        background-color: #fff;
        box-shadow: 0 0.05rem 0.3rem #666;
    }
    .nav-tabs > ul > li.collapse>ul>li{
        color: #000;
    }
    .nav-tabs > ul > li.collapse>ul>li:hover{
        color: #fff;
        background-color: var(--themeBlue);
        cursor: pointer;
    }
}

.pageBox {
    text-align: center;
    height: calc(100% - 1.875rem);
    min-width: 40rem;
}

.pageContent {
    display: none;
    height: 100%;
    overflow: hidden;
}

.pageContent.current {
    display: block;
}

.pageContent iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/*user*/
@media all{
    .user > ul{
        position: absolute;
        width: 8rem;
        right: 0px;
        background-color: #fff;
        box-shadow: 0 0.05rem 0.3rem #666;
        z-index: 5;
    }
    .user > ul >li>img{
        display: inline-block;
        width: 8rem;
        height: 8rem;
        border-bottom: 1px solid gray;

    }
    .user > ul >li>a{
        padding: 0.3rem 0.5rem;
        color: #000;
        font-size: 0.75rem;
    }
    .user > ul >li:hover{
        color: #fff;
        background-color: var(--themeBlue);
        cursor: pointer;
    }
    .user > ul >li:first-of-type:hover{
        color: #fff;
        background-color:#fff;
        cursor: pointer;
    }

}










